import React from "react";
// 引入地区组件
import AreaPicker from '@/components/common/area/areapicker'
const Profile = () => {
    const [form] = React.UI.Form.useForm()
    const [areashow, setAreashow] = React.useState(false)
    const [avatar, setAvatar] = React.useState([
        {
            url: React.Business.avatar_text,
        },
    ])
    const [Business] = React.useState({
        nickname: React.Business.nickname,
        mobile: React.Business.mobile,
        email: React.Business.email ?? '',
        gender: React.Business.gender ?? '',
        region_text: React.Business.region_text ?? '',
    })
    console.log(React.Business)


    // 图片上传
    const ChangeUpload = (file: File) => {
        React.Business.avatar = file

        return {
            url: URL.createObjectURL(file)
        }
    }

    const ChangeDel = () => {
        React.Business.avatar = null
    }

    //确认选择地区
    const AreaConfirm = (values: any, name: any) => {
        setAreashow(false)

        let [province, city, district] = values
        let regions = name.join('-')
        // 可以使用 form.setFieldsValue 来动态改变表单值。
        form.setFieldsValue({
            region_text: regions,
            province: province,
            city: city,
            district: district,
        })
    }

    const onFinish = async(values: any) => 
    {
        let data:any = {
            busid: React.Business.id,
            nickname: values.nickname,
            mobile: values.mobile,
            email: values.email,
            gender: values.gender,
        }

        // 判断是否文件上传
        if (React.Business.avatar) data.avatar = React.Business.avatar

        // 判断是否修改密码
        if (values.password) data.password = values.password

        // 判断是否修改地区
        if(form.getFieldValue('region_text'))
        {
            data.province = form.getFieldValue('province') ? form.getFieldValue('province') : React.Business.province
            data.city = form.getFieldValue('city') ? form.getFieldValue('city') : React.Business.city
            data.district = form.getFieldValue('district') ? form.getFieldValue('district') : React.Business.district
        }

        let result = await React.HTTP.upload('/business/profile', data);

        if(result.code == 1)
        {
            //覆盖cookie的信息
            React.Cookie.save('Business', result.data);

            //修改一下全局的Business用户数据
            React.Business = result.data;
            React.SetBusiness(result.data);

            React.success(result.msg, () => React.navigate('/business/index'));
        }
        else
        {
            React.error(result.msg);
        }
    }

    return (
        <>
            {/* 地区组件 */}
            <AreaPicker visible={areashow} onClose={() => setAreashow(false)} onConfirm={AreaConfirm} />

            <React.UI.Form
                form={form}
                layout='horizontal'
                onFinish={onFinish}
                initialValues={Business}
                footer={
                    <React.UI.Button block type='submit' color='primary' size='large'>
                        提交
                    </React.UI.Button>
                }
            >
                {/* 头像 */}
                <React.UI.Form.Item>
                    <React.UI.AutoCenter>
                        <React.UI.ImageUploader
                            value={avatar}
                            onChange={setAvatar}
                            maxCount={1}
                            upload={ChangeUpload}
                            onDelete={ChangeDel}
                        />
                    </React.UI.AutoCenter>
                </React.UI.Form.Item>

                {/* 昵称 */}
                <React.UI.Form.Item
                    name='nickname'
                    label='昵称'
                    rules={[{ required: true, message: '昵称不能为空' }]}
                >
                    <React.UI.Input placeholder='请输入昵称' />
                </React.UI.Form.Item>

                {/* 手机号码 */}
                <React.UI.Form.Item
                    name='mobile'
                    label='手机号码'
                    rules={[{ required: true, message: '手机号码不能为空' }, { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确' }]}
                >
                    <React.UI.Input placeholder='请输入手机号码' />
                </React.UI.Form.Item>

                {/* 密码 */}
                <React.UI.Form.Item
                    name='password'
                    label='密码'
                >
                    <React.UI.Input placeholder='请输入密码' clearable type='password' />
                </React.UI.Form.Item>

                {/* 邮箱 */}
                <React.UI.Form.Item
                    name='email'
                    label='邮箱'
                    rules={[
                        { required: true },
                        { type: 'string', min: 6 },
                        { type: 'email', warningOnly: true },
                    ]}
                >
                    <React.UI.Input placeholder='请输入邮箱' />
                </React.UI.Form.Item>

                {/* 性别 */}
                <React.UI.Form.Item
                    name='gender'
                    label='性别'
                    rules={[{ required: true, message: '性别不能为空' }]}
                >
                    <React.UI.Radio.Group>
                        <React.UI.Space style={{ '--gap': '24px' }}>
                            <React.UI.Radio value='0'>保密</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                            <React.UI.Radio value='2'>女</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>

                {/* 地区 */}
                <React.UI.Form.Item                
                    name='region_text'
                    label='地区'
                    onClick={() => setAreashow(true)}
                >
                    <React.UI.Input placeholder='请选择地区' readOnly />
                </React.UI.Form.Item>
            </React.UI.Form>

        </>
    )
}

export default Profile;